<template>
  <div class="add-con">
    <el-card class="box-card">
      <span>修改商品信息</span>
    </el-card>

    <!-- 添加数据的表单 -->
    <el-form
      :model="listQuery"
      :rules="rules"
      ref="listQuery"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="商品分类" prop="product_category_id">
        <el-cascader
          v-model="selectProductCateValue"
          :options="productCateOptions"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="listQuery.name"></el-input>
      </el-form-item>
      <el-form-item label="副标题" prop="sub_title">
        <el-input v-model="listQuery.sub_title"></el-input>
      </el-form-item>

      <el-form-item label="商品品牌" prop="brand_id">
        <el-select v-model="listQuery.brand_id" placeholder="全部">
          <el-option
            v-for="item in brandOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品介绍" prop="description">
        <el-input v-model="listQuery.description"></el-input>
      </el-form-item>
      <el-form-item label="图片链接地址" prop="pic">
        <el-input v-model="listQuery.pic"></el-input>
      </el-form-item>
      <el-form-item label="商品货号:" prop="product_sn">
        <el-input v-model="listQuery.product_sn" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="商品售价:" prop="price">
        <el-input v-model="listQuery.price" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="市场价:" prop="original_price">
        <el-input
          v-model="listQuery.original_price"
          class="input-width"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品库存:" prop="stock">
        <el-input v-model="listQuery.stock" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="计量单位:" prop="unit">
        <el-input v-model="listQuery.unit" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="商品重量:" prop="weight">
        <el-input v-model="listQuery.weight" class="input-width"></el-input>克
      </el-form-item>
      <el-form-item label="排序:" prop="sort">
        <el-input v-model="listQuery.sort" class="input-width"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//引入mixin
//import 引入模块时，如果输出是 default 的输出  引入时不需要加大括号；文件里只能有一个default 的输出
//如果没有使用 default 的输出  引入时需要加大括号
import productmixin from "./productmixin";
//引入添加接口
import {
  getOneProduct,
  getParentProductCate,
  updateProduct,
} from "@/api/product";
export default {
  name: "addproduct",
  data() {
    return {
      listQuery: {
        brand_id: null, //商品品牌 id
        brand_name: "", //商品品牌名称
        delete_status: 0, //删除标志位，默认填 0，表示未删除
        description: "", //商品介绍
        name: "", //商品名称
        original_price: 0, //市场价
        pic: "", //商品图片的 url 地址
        price: 0, //商品售价
        product_category_id: null, //分类 id
        product_category_name: "", //分类名称
        product_sn: "", //商品货号
        sort: 0, //排序
        stock: 0, //商品库存
        sub_title: "", //副标题
        unit: "", //计量单位
        weight: 0, //商品重量
        sale: 0, //商品销量
        publish_status: 0, //上架
        new_status: 0, //新品
        recommand_status: 0, //推荐
        verify_status: 0, //审核状态
      },
      rules: {
        //表单的验证项
        product_category_id: [
          { required: true, message: "请选择商品分类", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 5,
            max: 140,
            message: "长度在5-140个字符之间",
            trigger: "blur",
          },
        ],
        sub_title: [
          { required: true, message: "请输入副标题", trigger: "blur" },
        ],
        brand_id: [
          { required: true, message: "请选择品牌名称", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入商品介绍", trigger: "blur" },
        ],
        pic: [
          {
            required: true,
            message: "请输入商品图片链接地址",
            trigger: "blur",
          },
        ],
      },
    };
  },
  async mounted() {
    //获取商品数据，添加到 listQuery中
    var res = await getOneProduct({ id: this.$route.params.id });
    console.log(res);
    this.listQuery = res.data;
    //商品分类的级联菜单需要特殊处理  需要两级id
    var iddata = await getParentProductCate({
      id: this.listQuery.product_category_id,
    });
    console.log(iddata);
    this.selectProductCateValue = [];
    this.selectProductCateValue.push(iddata.data.parent_id); //一级id
    this.selectProductCateValue.push(iddata.data.id);
  },
  mixins: [productmixin],
  methods: {
    //提交函数
    submitForm() {
      console.log("表单提交了");
      //找到表单项
      this.$refs.listQuery.validate((valid) => {
        if (valid) {
          //验证通过了
          console.log("验证通过了");
          //品牌名称
          this.brandOptions.forEach((i) => {
            if (i.id == this.listQuery.brand_id) {
              this.listQuery.brand_name = i.name;
            }
          });
          //分类名称 二级分类名称
          this.productCateOptions.forEach((i) => {
            i.children.forEach((j) => {
              if (j.value == this.listQuery.product_category_id) {
                this.listQuery.product_category_name = j.label;
              }
            });
          });

          console.log(this.listQuery);
          updateProduct(this.listQuery).then((res) => {
            console.log("修改成功", res);
            //提示
            this.$message({
              message: "成功修改商品",
              duration: 1000,
              type: "success",
            });
            //跳转列表页
            this.$router.push("/pms/product");
          });
        } else {
          //验证没通过
          console.log("验证失败");
          return false;
        }
      });
    },
    //重置函数
    resetForm() {},
  },
};
</script>

<style scoped lang="scss">
.add-con {
  padding: 10px;
}
</style>
